<template>
  <div>
    <div class="split-line"></div>
    <swiper :options="swiperOption" class="swiper-container" ref="slideShow">
      <swiper-slide v-for="slide in swiperSlides.kv" class="swiper-item" :key="slide"><img :src="slide.picUrl" title="slide.title" @click="go(slide.linkUrl)"></swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import { microspotTarget } from '@/common/decorators'
  import {fetchJsonp} from '@/common/common'

  let url = {
    test: 'http://114.141.165.129/operation/config/niurenniugu/signedAd.json',
    prod: 'http://dl.app.gtja.com/operation/config/niurenniugu/signedAd.json'
  }
  let process = new Promise((resolve, reject) => {
    fetchJsonp(url.test, function (res) {
      resolve(res)
    })
  })

  let win = window
  export default {
    name: 'slide-show',
    data () {
      return {
        swiperOption: {
          pagination: '.swiper-pagination',
          slidesPerView: 1,
          centeredSlides: true,
          paginationClickable: true,
          spaceBetween: 10,
          loop: true,
          autoplay: 3000,
          autoplayDisableOnInteraction: false,
          preventClicks: false,
          lazyLoading: true,
          lazyLoadingOnTransitionStart: true
        },
        swiperSlides: []
      }
    },
    components: {
      swiper,
      swiperSlide
    },
    methods: {
      @microspotTarget
      go(url) {
        return new Promise((resolve, reject) => {
          win.location.href = url
          resolve('006002')
        })
      }
    },
    mounted () {
      process.then((res) => {
        this.swiperSlides = res || []
        console.log(this.swiperSlides, '-----轮播数据----')
      })
    }
  }
</script>
<style scoped="" lang="less">
  .swiper-container{
    width: 280px;
    height: 80px;
    background: #fff;
    border: 1PX #eee solid;
    border-radius: 4.5px;
  }
  .swiper-item{
    img{
      width: 100%;
      height: 100%;
    }
  }
</style>
